<script setup>
import { ref } from 'vue'
import { defineEmits } from 'vue'

defineProps({
  num: {
    required: true,
    type: Number
  },
  color: {
    required: false,
    type: String
  },
  tooltip: {
    required: false,
    type: String
  }
})

const emit = defineEmits(['success'])
const toTopClick = () => {
  emit('success')
}

const colorFlag = ref(false)
const changeColor = () => {
  colorFlag.value = !colorFlag.value
}
</script>

<template>
  <el-tooltip
    class="box-item"
    effect="dark"
    :content="tooltip"
    placement="left-start"
  >
    <div
      class="toTopButton"
      @click="toTopClick"
      @mouseenter="changeColor"
      @mouseleave="changeColor"
      :style="`bottom: ${50 * num + 30}px;background-color: ${
        colorFlag ? color || '#409eff' : '#fff'
      };`"
    >
      <slot name="icon"></slot>
    </div>
  </el-tooltip>
</template>

<style lang="scss" scoped>
.toTopButton {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background-color: #fff;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    color: #fff;
  }
}
</style>
